<template>
  <div class="user-info">
    <p style="margin-right: 15px">当前时间：{{ nowTime }}</p>
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar
          :size="30"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        />
        <span style="margin-left: 5px">{{ name }}</span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="a" @click="handleExit"
            >退出登录</el-dropdown-item
          >
          <el-dropdown-item command="a">用户信息</el-dropdown-item>
          <el-dropdown-item command="a">系统管理</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { useStore } from '@/store'
import { computed, onUnmounted, ref } from 'vue'
import localCache from '@/utils/catch'
import router from '@/router'
// import dayjs from 'dayjs'
const store = useStore()
let name = computed(() => store.state.login.userInfo.name)
// 获取当前时间函数
let currentTime = () => {
  let date = new Date()
  let year = date.getFullYear() //月份从0~11，所以加一
  let month = date.getMonth()
  let dateArr: any[] = [
    date.getMonth() + 1,
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds()
  ]
  //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
  for (let i = 0; i < dateArr.length; i++) {
    if (dateArr[i] >= 0 && dateArr[i] <= 9) {
      dateArr[i] = '0' + dateArr[i]
    }
  }
  let strDate =
    year +
    '-' +
    dateArr[0] +
    '-' +
    dateArr[1] +
    ' ' +
    dateArr[2] +
    ':' +
    dateArr[3] +
    ':' +
    dateArr[4]
  //此处可以拿外部的变量接收  strDate:2022-05-01 13:25:30
  //this.date = strDate;
  return strDate
}
// 初始化当前时间nowTime
let nowTime = ref(currentTime())
// 定义当前的计时器
let timeInterval = NaN
// 每秒获取当前时间
var getTime = () => {
  timeInterval = setInterval(() => {
    let newTime = currentTime()
    nowTime.value = newTime
  }, 1000)
}
getTime()

// 退出登录的回调
const handleExit = () => {
  // 退出登录将本地token清空并跳转到登录页,此处需要清空些什么需要具体看公司要求
  localCache.deleteCache('token')
  // router.push({ path: '/login' })
  router.push('/login')
}

// 组件销毁前清除工作
onUnmounted(() => {
  clearInterval(timeInterval)
})

// const nowTime1 = dayjs().format('YYYY-MM-DD HH:mm:ss')
</script>

<style scoped lang="less">
.user-info {
  display: flex;
  justify-content: space-between;
}
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
